<!-- <div v-bind:title="msg" >这是p标签 </div>
    <div :title="msg">aaa</div> -->
<!-- {{ msg }}
       <p v-html="msg"></p>
       <p v-text="msg"></p> --> <!-- <div v-if="flag">这是v-if</div>
      <div v-show="flag">这是v-show</div> -->
<!-- {{ num }}
    {{ comNum }}
    {{ getNewNum() }} -->

<!-- {{ msg }}<input type="text" name="uname" v-model="msg" /> -->
<!-- {{ user }}
     <p>用户号：{{ user.uid }}</p>
     <p>用户名:{{ user.uname }}</p>
     <p>用户年龄:{{ user.uage }}</p> -->

<!-- <p>{{ userArr[0].uid }},{{ userArr[0].uname }}</p>
      <p>{{ userArr[1].uid }},{{ userArr[1].uname }}</p>
      <p>{{ userArr[2].uid }},{{ userArr[2].uname }}</p> -->

<!-- <p v-for="(item,index) in userArr" :key="index">
      {{ item.uid }},{{ item.uname }}
    </p> -->

<!-- <table>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="index">
        <td>{{ item.userId }} </td>
        <td>{{ item.userName }} </td>
        <td>{{ item.userAge }} </td>
        <td><button v-on:click="del(index)">删除</button></td>
      </tr>
      <tr>
        <td colspan="4"><button @click="clear">清空</button></td>
      </tr>
    </table>

    <h3>添加</h3>
    姓名：<input type="text" v-model="uname"><br>
    年龄：<input type="text" v-model="uage"><br>
    <button @click="add">添加</button> -->
<!-- home
    {{ msg }}
     <AboutView @childmsg="get">  </AboutView>    -->




<!-- <div id="app">
    <h1>TodoList</h1>
   <AddNew @submitNewItem="addNewItem"></AddNew>
   <TheList @handleJudge="toDone" :list="todoList"></TheList>
   <hr>
   <TheList @handleDelete="toDelete" :listType="true"></TheList>
  </div> -->

<!-- <template>
<div >
<div  v-for="(item,index) in arr" :key="index">
  {{ item.name}}{{ item.age }}
   <el-button type="primary">Primary</el-button>
</div>
  </div>
</template>

<script setup>

import axios from 'axios';
import {ref} from 'vue'

let arr = ref([])


axios.get("http://localhost:8080/testServlet/LoginServlet")
.then((res)=>{
  console.log(res)
  arr.value = res.data
})
.catch((err)=>{
console.log(err)
}) -->


<template>
  <div>
    <el-button type="primary" @click="showDialog">添加</el-button>
    <el-table :data="arr" style="width: 100%">
      <el-table-column label="员工编号" prop="empno" />
      <el-table-column label="员工姓名" prop="ename" />
      <el-table-column label="职位" prop="job" />
      <el-table-column label="入职日期" prop="hiredate" />
      <el-table-column label="薪资" prop="sal" />
      <el-table-column label="部门编号" prop="deptno" />

      <el-table-column align="right">
        <!-- 搜索框 -->
        <template #header>
          <el-input v-model="search" @keyup.enter="find" size="small" placeholder="按照姓名搜索" />
        </template>
        <!-- 搜索框 -->

        <!-- 两个按钮的插槽 -->
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="warning" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
        <!-- 两个按钮的插槽 -->
      </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10]" :size="size"
      :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="arrLength"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    当前页码 {{ currentPage4 }}
    每页数据条数 {{ pageSize4 }}


    <!-- 删除有关对话框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
      <span>是否删除</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteData">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 删除有关对话框 -->

    <!-- 编辑对话框 -->
    <el-dialog v-model="centerDialogVisible" title="编辑" width="500" align-center>

      <el-form :model="emp">
        <el-form-item label="员工编号" :label-width="formLabelWidth">
          <el-input v-model="emp.empno" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="emp.ename" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工职位" :label-width="formLabelWidth">
          <el-input v-model="emp.job" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入职日期" :label-width="formLabelWidth">
          <!-- <el-input v-model="emp.hiredate" autocomplete="off" /> -->
          <el-date-picker v-model="emp.hiredate" type="date" value-format="YYYY-MM-DD" placeholder="请选择入职日期"
            :size="size" />
        </el-form-item>
        <el-form-item label="员工薪资" :label-width="formLabelWidth">
          <el-input v-model="emp.sal" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门编号" :label-width="formLabelWidth">

          <el-select v-model="emp.deptno" placeholder="Select" style="width: 240px">
            <el-option v-for="(item, index) in dept" :key="index" :label="item.deptno" :value="item.deptno" />
          </el-select>
        </el-form-item>
      </el-form>


      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="edit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑对话框 -->

    <!-- 添加对话框 -->
         <el-dialog v-model="addDialogVisible" title="添加" width="500" align-center>

      <el-form :model="addEmp">
        <!-- <el-form-item label="员工编号" :label-width="formLabelWidth">
          <el-input v-model="addEmp.empno" autocomplete="off"  />
        </el-form-item> -->
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="addEmp.ename" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工职位" :label-width="formLabelWidth">
          <el-input v-model="addEmp.job" autocomplete="off" />
        </el-form-item>
        <el-form-item label="入职日期" :label-width="formLabelWidth">
          <!-- <el-input v-model="emp.hiredate" autocomplete="off" /> -->
          <el-date-picker v-model="addEmp.hiredate" type="date" value-format="YYYY-MM-DD" placeholder="请选择入职日期"
            :size="size" />
        </el-form-item>
        <el-form-item label="员工薪资" :label-width="formLabelWidth">
          <el-input v-model="addEmp.sal" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门编号" :label-width="formLabelWidth">

          <el-select v-model="addEmp.deptno" placeholder="请选择部门编号" style="width: 240px">
            <el-option v-for="(item, index) in dept" :key="index" :label="item.deptno" :value="item.deptno" />
          </el-select>
        </el-form-item>
      </el-form>


      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
<!-- 添加对话框 -->
  </div>
</template>

<script setup>
import axios from 'axios'
import qs from 'qs'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
axios.defaults.withDefaults = true

const dialogVisible = ref(false) // 控制删除对话框显示或隐藏的，默认就是隐藏
const centerDialogVisible = ref(false) // 控制编辑对话框显示或隐藏的，默认就是隐藏
const addDialogVisible = ref(false)
const currentPage4 = ref(1) // 当前默认页码
const pageSize4 = ref(5)    // 初始每页数据条数

let search = ref('')

const find = () =>{
  console.log(search.value)
}


let arr = ref([])
let arrLength = ref(0)

let init = () => {
  axios.get(`http://localhost:8080/testServlet/empList?currentPage=${currentPage4.value}&pageSize=${pageSize4.value}&ename=${search.value}`)
    .then((res) => {
      console.log(res)
      arr.value = res.data.list
      arrLength.value = res.data.totalCount
      // arr.value = res.data
      // arrLength.value = arr.value.length // 总共有多少条数据 
    })
}


onMounted(() => { // 页面加载就有数据
  init() // 运行时就调用获取数据
})
let dept = ref([])
// 查询dept表，要里面的deptno
let getDept = () => {
  axios.get(`http://localhost:8080/testServlet/getDept`)
    .then((res) => {
      console.log('getDept', res)
      dept.value = res.data
    })
}
//点击添加按钮的时候，需要显示对话框和调用getDept()
let showDialog = ()=>{
  addDialogVisible.value = true
  getDept()
}
let addEmp = ref({}) //添加数据的对象
//添加
let add =()=>{
 axios.post(`http://localhost:8080/testServlet/addEmp`, qs.stringify(addEmp.value))
    .then((res) => {
      if (res.data != null) {
        ElMessage({
          message: '添加成功.',
          type: 'success',
        })
        
        addDialogVisible.value = false  // 隐藏对话框
        init()
      } else {
        ElMessage.error('添加失败.')
        addDialogVisible.value = false  // 隐藏对话框
        init()
      }
    })
}




// 删除
let deleteData = () => {
  axios.get(`http://localhost:8080/testServlet/del?enpno=${empno.value}`).then((res) => {
    if (res.data == 1) {
      ElMessage({
        message: '删除成功.',
        type: 'success',
      })
      dialogVisible.value = false  // 隐藏对话框
      init()
    } else {
      ElMessage.error('删除失败.')
      dialogVisible.value = false  // 隐藏对话框
      init()
    }
  })
}

const handleSizeChange = (val) => {
  console.log(`${val}条数据每页`)
  pageSize4.value = val  // 每切换每页显示数据条数，就更改pageSize4
  init()  // 一旦页面变化就重新获取数据
}
const handleCurrentChange = (val) => {
  console.log(`当前页码: ${val}`)
  currentPage4.value = val
  init()  // 一旦页面变化就重新获取数据
}



let emp = ref({}) // 记录点击编辑按钮之后的那行数据
// 编辑（后台）
let edit = () => {

  axios.post(`http://localhost:8080/testServlet/edit`, qs.stringify(emp.value))
    .then((res) => {
      if (res.data != null) {
        ElMessage({
          message: '修改成功.',
          type: 'success',
        })
        centerDialogVisible.value = false  // 隐藏对话框
        init()
      } else {
        ElMessage.error('修改失败.')
        centerDialogVisible.value = false  // 隐藏对话框
        init()
      }
    })
}


// 点击编辑按钮时候调用
const handleEdit = (index, row) => {
  centerDialogVisible.value = true
  console.log(index, row)
  getDept()
  emp.value = row    // js对象可以动态添加属性
}

let empno = ref(0) // 删除用的empno
// 点击删除按钮时候调用
const handleDelete = (index, row) => {

  // 点击按钮就显示对话框
  dialogVisible.value = true

  console.log(index, row)
  console.log(row.empno)
  //deleteData(row.empno)

  empno.value = row.empno
}




</script>











<!-- // ?key=746b206e609c4b45e40323bfe5351ad6
// axios.get('/juheNews?key=d724b27e05f5ae609104bc0e0463f70b')
//   .then((res)=>{
//     console.log(res)
//      arr.value= res.data.result.data
// })
//   .catch((err)=>{
//     console.log(err)
// })

// axios.get({
  // method:'get',
  // url:'//juheNews',

  // data:qs.stringify{
  //   key('d724b27e05f5ae609104bc0e0463f70b')
  // }
//   params:{
//     key:'d724b27e05f5ae609104bc0e0463f70b'
//   }
// })
// .then((res)=>{
// arr.value= res.data.result.data
// })
// .catch((err)=>{
// console.log(err)
// }) -->

















<!-- 
//   setup(){
//     let todoList = ref([])
//     let doneList = ref([])
//       function  addNewItem(newItem) {
//       todoList.value.push(newItem);
//     }
//     function toDone(index) {
//       doneList.value.push(todoList.value.splice(index, 1)[0]);
//     }
//     function toDelete(index) {
//      doneList.value.splice(index, 1);
//     }
//     return {
//       todoList,
//       doneList, 
//       addNewItem,
//       toDone,
//       toDelete
//     }
// },




// methods:{
//   addNewItem(newItem) {
//       this.todoList.push(newItem);
//     },
//   toDone(index) {
//       this.doneList.push(this.todoList.splice(index, 1)[0]);
//     },
//   toDelete(index) {
//      this.doneList.splice(index, 1);
//     }
// },
// data(){
//     return{
//     todoList : [],
//     doneList : []
//     }
// },

//     components:{
//       AddNew,
//       TheList
//     } -->
<!-- // } -->

<!-- // import AddNew from "./AddNew.vue";
// import TheList from "./TheList.vue";
// import {ref} from 'vue'

// let todoList = ref([])
// let doneList = ref([])

//  function addNewItem(newItem) {
//       todoList.value.push(newItem);
//     }
//   function toDone(index) {
//       doneList.value.push(todoList.value.splice(index, 1)[0]);
//     }
//   function toDelete(index) {
//      doneList.value.splice(index, 1)
//     } -->


<!-- </script>
<style>


</style> -->